<template>
	<div class="mb-8">
		<a-space>
			<a-button type="primary" @click="back" size="small" v-if="!props.button || props.button.includes('back')">
				<template #icon><rollback-outlined /></template>
				返回
			</a-button>
			<a-button type="primary" @click="save" size="small" v-if="!props.button || props.button.includes('save')">
				<template #icon><save-outlined /></template>
				保存
			</a-button>
			<a-button @click="preview" size="small" v-if="!props.button || props.button.includes('preview')">
				<template #icon><eye-outlined /></template>
				预览
			</a-button>
			<a-button @click="print" size="small" v-if="!props.button || props.button.includes('print')">
				<template #icon><printer-outlined /></template>
				打印
			</a-button>
			<a-button @click="printExport" size="small" v-if="!props.button || props.button.includes('export')">
				<template #icon><ExportOutlined /></template>
				导出PDF
			</a-button>

			<a-button @click="viewJSON" size="small" v-if="!props.button || props.button.includes('json')">
				<template #icon><FontSizeOutlined /></template>
				查看JSON
			</a-button>
			<a-button
				type="primary"
				danger
				@click="clear"
				size="small"
				v-if="!props.button || props.button.includes('clear')"
			>
				<template #icon><clear-outlined /></template>
				清空
			</a-button>
		</a-space>
	</div>
</template>
<script setup>
	const props = defineProps({
		button: {
			type: Array,
			default: () => []
		},
		loading: {
			type: Boolean,
			default: () => false
		}
	})

	const emit = defineEmits(['back', 'preview', 'save', 'print', 'export', 'clear', 'json'])

	// 返回
	const back = () => {
		emit('back')
	}
	// 预览
	const preview = () => {
		emit('preview')
	}
	// 保存
	const save = () => {
		emit('save')
	}
	// 打印
	const print = () => {
		emit('print')
	}
	// 导出PDF
	const printExport = () => {
		emit('export')
	}
	// 清空
	const clear = () => {
		emit('clear')
	}

	// 查看JSON
	const viewJSON = () => {
		emit('json')
	}
</script>
<style scoped lang="less">
	.xn-print-topbar {
		margin-bottom: 2px;
		padding: 10px;
		background: var(--card-actions-background);
	}
</style>
